<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 150px;
            height: 150px;
        }

        ul,
        li {
            list-style: none;
        }

        li {
            float: left;
            text-align: center;
            width: 200px;
        }
    </style>
    <script>
        // 创建节点的方法
        // createElement(“tagName”)创建一个节点
        // A.appendChild(B),把B节点添加到A节点后
        // insertBefore(A,B)  把A（必须，新节点）插入到B（可选）节点之前
        // cloneNode(deep) //deep布尔值，true,深度克隆,false，浅克隆


        // 删除和修改的方法
        // removeChild(node)  删除
        // replaceChild(new,old)   替换，用new替换掉old


    </script>
</head>

<body>
    <p>选择你喜欢的物品
        <input type="radio" name="mouse" onclick="mouse()">罗技鼠标
        <input type="radio" name="mouse" onclick="mouse()">雷蛇鼠标
    </p>
    <div></div>

    <script>

        function mouse() {
            let ele = document.getElementsByTagName("input");
            let a = document.getElementsByTagName("div")[1];

            if (ele[0].checked) {
                let img = document.createElement("img");
                img.setAttribute("src", "./img/gj.jpg");
                img.setAttribute("alt", "雷蛇鼠标")
                a.appendChild(img);
            }
            else if (ele[1].checked) {
                let img = document.createElement("img");
                img.setAttribute("src", "./img/ls.jpg");
                img.setAttribute("alt", "雷蛇鼠标");
                img.setAttribute("onclick", "copy()")
                a.appendChild(img);
            }
        }

        function copy() {
            let a = document.getElementsByTagName("div")[1];
            let copy = a.lastElementChild.cloneNode(false);
            a.insertBefore(copy, a.firstChild)
        }


    </script>


    <ul>
        <li>
            <img src="./img/f01.jpg" alt="" id="a1">
            <p><input type="button" value="删除图片" onclick="delimg()"></p>
        </li>
        <li>
            <img src="./img/f02.jpg" alt="" id="a2">
            <p><input type="button" value="替换图片" onclick="th()"></p>
        </li>

    </ul>

    <script>
        function delimg() {
            let del = document.getElementById("a1");
            del.parentElement.removeChild(del)
        }
        function th(){
            let yh = document.getElementById("a2");
            let newNode = document.createElement("img");
            newNode.setAttribute("src","./img/f03.jpg");
            yh.parentElement.replaceChild(newNode,yh);

        }
    </script>






</body>

</html>